<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="m-4">
              <div class="block" style="float: left; margin-bottom: 10px;">
                <el-date-picker v-model="data" type="month" placeholder="请选择月份工资" @change="selectAll(1)" />
                <el-button type="danger" :icon="Delete" circle size="small" style="margin-left: 5px"
                  @click="clearData" />
              </div>
            </div>
          </el-col>
        </el-row>
        <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
          <el-tab-pane label="工资信息" name="first" default>

            <el-table :data="pageInfo.list" border style="width: 100%; margin-top: 30px;">
              <el-table-column prop="sid" label="ID" width="50px" />
              <el-table-column prop="medicalStaff.mno" label="员工号" width="80px" />
              <el-table-column prop="medicalStaff.mname" label="员工姓名" width="100px" />
              <el-table-column prop="picdir" label="头像" width="110px">
                <template #default="scope">
                  <el-avatar :size="80"
                    :src="SERVER_ADDR + '/upload/' + scope.row.medicalStaff.picdir"></el-avatar>
                </template>
              </el-table-column>
              <el-table-column prop="payday" label="发薪日期" width="120px" />
              <el-table-column prop="medicalStaff.entryDate" label="入职日期" width="120px" />
              <el-table-column prop="comm" label="提成" width="80px" />
              <el-table-column prop="prize" label="奖金" width="80px" />
              <el-table-column prop="cowa" label="考勤" width="80px" />
              <el-table-column prop="salary" label="基本工资" width="110px" />
              <el-table-column prop="sumnum" label="实际工资" width="110px" />
              <el-table-column prop="medicalStaff.mphone" label="联系方式" width="220px" />
              <!-- <el-table-column label="操作" width="70px">
                <template #default="scope">
                  <el-button type="primary" style="width: 15px;" :icon="View"
                    @click="selectBySid(scope.row.sid)" />
                </template>
              </el-table-column> -->
            </el-table>
            <!-- 分页开始 -->
            <el-row class="row-bg" justify="center">
              <el-col :span="5">
                <div class="grid-content ep-bg-purple" />
              </el-col>
              <el-col :span="8">
                <el-pagination background layout="prev, pager, next" :page-count="pageInfo.pages" @change="selectAll"
                  style="margin-top: 10px; margin-left: 25%;" v-model:urrent-page="pageInfo.pageNum" />
              </el-col>
              <el-col :span="5">
                <div class="grid-content ep-bg-purple" />
              </el-col>
            </el-row>
            <!-- 分页结束 -->
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
  <!-- 详细信息框开始 -->
  <el-drawer v-model="drawer" title="详细工资" :with-header="false">
    <el-descriptions title="详细工资" direction="vertical" :column="4" :size="size" border>
      <el-descriptions-item label="员工名">{{ salaryByMid.medicalStaff.mname }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ salaryByMid.medicalStaff.mphone }}</el-descriptions-item>
      <el-descriptions-item label="发薪日期" :span="2">{{ salaryByMid.payday }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="工资明细" :column="5" :size="size" direction="vertical" :style="blockMargin">
      <el-descriptions-item label="提成">+{{ salaryByMid.comm }}</el-descriptions-item>
      <el-descriptions-item label="奖金">+{{ salaryByMid.prize }}</el-descriptions-item>
      <el-descriptions-item label="考勤">-{{ salaryByMid.cowa }}</el-descriptions-item>
      <el-descriptions-item label="五险一金">-{{ salaryByMid.fiaof }}</el-descriptions-item>
      <el-descriptions-item label="基本工资">+{{ salaryByMid.salary }}</el-descriptions-item>
      <el-descriptions-item label="最终工资">
        <el-tag size="small">综合新增</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="">
        {{ salaryByMid.medicalStaff.mname }}的最终工资是{{ salaryByMid.sumnum }}
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>
<script setup>
import holidaysApi from '@/api/admin/holidaysApi.js';
import { ref, resolveDirective } from 'vue';
import { DataAnalysis, Minus, Delete, View } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import salaryApi from '@/api/admin/salaryApi.js';
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
//详情开关
const drawer = ref(false);
//详细卡默认
const activeName = ref('first')
//定义护工账单的模板
const pageInfo = ref({});
const salaryList = ref([]);
//定义日期
const data = ref('');
const selectAll = (pageNum) => {
  salaryApi.selectAllSalaryByMid(data.value, pageNum)
    .then(resp => {
      pageInfo.value = resp.data
      salaryList.value = resp.data.list
    })
}
const salaryByMid = ref({});
//查看工资明细
const selectBySid = (sid) =>{
  salaryApi.selectBySid(sid)
      .then(resp => {
        if(resp.code == 10000){
          drawer.value = true
        }
      })
}
//清除日期
const clearData = () => {
  data.value = ''
  selectAll(1)
}
selectAll(1)
</script>
<style scoped></style>